<template>
  <div class="radio-wrap">
    <div v-model="tabView" class="radio-group">
      <span
        v-for="(tab ,index) in tabs"
        :class="{active:iscur==index}"
        @click="iscur=index,tabChange('select' + (index + 1))"
      >{{ tab.name }}</span>
    </div>
    <keep-alive>
      <component :is="tabView" />
    </keep-alive>
  </div>
</template>
<style lang="scss" scoped>
.radio-group {
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 30px;
  span {
    padding: 0 20px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
  }
  .active {
    border-bottom: 2px solid #1890ff;
    color: #1890ff;
  }
}
</style>
<script>
import select1 from './components/select01.vue'
import select2 from './components/select02.vue'
export default {
  components: {
    select1,
    select2
  },
  data() {
    return {
      activeName: 'second',
      tabView: 'select1',
      iscur: 0,
      tabs: [{ name: '基本信息' }, { name: '其他信息' }]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    tabChange: function(tab) {
      this.tabView = tab
    }
  }
}
</script>
